
import  { initState } from './state.js'
import { compileToFunction } from "./compiler/index.js";
import  {mountComponent } from './lifecircle.js'
export function initMixin(Vue){
    Vue.prototype._init = function(options){
        const vm = this;
        vm.$options = options
        initState(vm)

        if(vm.$options.el){
            this.$mount(vm.$options.el)
        }
    }

    Vue.prototype.$mount = function(el){
        const vm = this
        el = document.querySelector(el)
        vm.$el = el 
        const options = vm.$options
        // 把模板转化成 对应的渲染函数 =》 虚拟dom概念 vnode =》 diff算法 更新虚拟dom =》 产生真实节点，更新
        if(!options.render){
            let template = options.template;
            if(!template && el){ // 用户也没有传递template 就取el的内容作为模板
                template = el.outerHTML;
                let render = compileToFunction(template);
                options.render = render;
            }
        }

        mountComponent(vm,vm.$el)
    }
}